<template>
  <div class="shortcut-box">
    <div class="shortcut-title">
      快捷申请
    </div>
    <div class="shortcut-body">
      <div
        class="shortcut-item"
        @click="toLeave"
      >
        <div class="item-t">
          <el-icon><Document /></el-icon>
        </div>
        <div class="item-b">
          通用申请
        </div>
      </div>
      <div
        class="shortcut-item"
        @click="toSeal"
      >
        <div class="item-t">
          <el-icon><Document /></el-icon>
        </div>
        <div class="item-b">
          借款申请
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Document, Stamp} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
import emitter from "@/lib/eventBus";


const router = useRouter()
const toLeave = async () => {
  await router.push('/mine-all')
  await emitter.emit('showLeave',true)
}

const toSeal = async () => {
  await router.push('/borrow-mine-all')
  await emitter.emit('showBorrow',true)
}
</script>

<style scoped lang="less">
.shortcut-box{
  margin-left: 8.5vw;
  margin-top: 2vh;
  width: 56vw;
  height: 36vh;
  border: 1px solid lightgray;
  border-radius: 10px;
  box-shadow: 0 0 7px 7px lightgray;
  background-color: rgba(250, 250, 250);
  .shortcut-title{
    height: 5vh;
    border-bottom: 1px solid #e4eaeb;
    box-sizing: border-box;
    line-height: 5vh;
    font-size: 2vh;
    padding-left: 1vw;
    text-align: left;
    font-weight: 600;
  }
  .shortcut-body{
    font-family: yuyang;
    font-size: 2vh;
    display: flex;
    flex: 1;
    .shortcut-item{
      //border: 1px solid;
      width: 5vw;
      height: 10vh;
      margin-left: 2vw;
      margin-top: 2vh;
      .item-t{
        font-size: 3vh;
        /* padding-top: 2vh; */
        color: #969696;
        background-color: #f0f0f0;
        line-height: 7vh;
        box-sizing: border-box;
        height: 6vh;
      }
      .item-b{
        font-size: 1.5vh;
        line-height: 4vh;
        color: #4a5152;
      }
      &:hover{
        cursor: pointer;
        .item-t{
          color: rgb(72,145,255);
        }
        .item-b{
          color: rgb(72,145,255);
        }
      }
    }
  }
}
</style>
